<!--
 * @Description: 
 * @Date: 2023-03-10 16:34:00
 * @LastEditors: czp
 * @LastEditTime: 2023-05-08 10:29:41
-->
<template>
	<div class="page">
		<div class="header">
			<div class="title">推荐店铺</div>
			<div class="list">
				<div class="box" v-for="(item, index) in recommendList" :key="index">
					<el-image :src="item.img" fit="cover" />
					<span>{{ item.name }}</span>
				</div>
			</div>
		</div>

		<div class="food-list">
			<div class="title">特色店铺</div>

			<div class="tabs">
				<div :class="['tab', { active: activeFoodIndex == index }]" @click="activeFoodIndex = index" v-for="(item, index) in foodList" :key="index">{{ item.name }}</div>
			</div>

			<div class="shop-list">
				<div class="shop" v-for="(item, index) in foodList[activeFoodIndex].shops" :key="index">
					<base-swiper width="30rem" height="20rem" :img-list="item.img" />
					<div class="info">
						<div class="name">{{ item.name }}</div>
						<div class="content">
							<p>{{ item.desc }}</p>
							<p>{{ item.addr }}</p>
							<p>{{ item.tel }}</p>
						</div>

						<el-button class="btn" color="#8A1313">了解更多 </el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import BaseSwiper from "~V/components/BaseSwiper/index.vue";
import { useBaseStore } from "@/store/base";

const { cosPrefix } = useBaseStore();

const activeFoodIndex = ref(0);

const recommendList = [
	{
		name: "悬崖餐厅",
		img: cosPrefix + "three-level/xiangsu/meishijingxuan/tuijian/1.png"
	},
	{
		name: "老茶馆",
		img: cosPrefix + "three-level/xiangsu/meishijingxuan/tuijian/2.png"
	},
	{
		name: "无有图书馆",
		img: cosPrefix + "three-level/xiangsu/meishijingxuan/tuijian/3.png"
	},
	{
		name: "烟草村碗碗羊肉",
		img: cosPrefix + "three-level/xiangsu/meishijingxuan/tuijian/4.png"
	}
];

const foodList = [
	{
		name: "碗碗羊肉",
		shops: [
			{
				name: "仙女山碗碗羊肉",
				desc: ``,
				addr: `地址：武隆区白杨路43号`,
				tel: "电话：13658487145",
				img: [cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/wanwanyangrou/1.png"]
			},
			{
				name: "强杰羊肉馆",
				desc: ``,
				addr: `地址：武隆区芙蓉中路77号`,
				tel: "电话：15023934866",
				img: [cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/wanwanyangrou/2.png"]
			}
		]
	},
	{
		name: "私房菜",
		shops: [
			{
				name: "徐家雅院",
				desc: `徐家满声会中庭，雅院蝶梦入云乡；雲筑徐家雅院，仙女山镇的美食城堡。雅院鮮椒鱼，地道民间菜，烤全羊，烤鸡，群英荟萃；棋牌室，民宿，灯光舞台，应有尽有；徐家雅院全体员工欢迎各位朋友的到来，品特色菜肴,会知心朋友。`,
				addr: `地址：仙女山街道翠云路68号`,
				tel: "电话：13896579065； 023-85612999",
				img: [
					cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/sifangcai/xujiayayuan/1.jpg",
					cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/sifangcai/xujiayayuan/2.jpg",
					cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/sifangcai/xujiayayuan/3.jpg",
					cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/sifangcai/xujiayayuan/4.jpg"
				]
			},
			{
				name: "武隆人家私房菜",
				desc: ``,
				addr: `地址：武隆区翠云路54号`,
				tel: "电话：18523226721",
				img: [cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/sifangcai/wulongrenjia/1.png"]
			}
		]
	},
	{
		name: "烤全羊",
		shops: [
			{
				name: "陈家花园",
				desc: `我们将用不同的食材，经过不同的烹饪方式，展现出无限的美味和魅力。给人以醇厚的口感，散发出迷人的香气，尤其是我们的烤全羊令人欲罢不能，2015年中央电视台中国味道专题报道了我们家烤羊（仙女峰的最老味道）。陈家花园全体员工竭诚为您服务，欢迎您的到来。`,
				addr: `地址：仙女山街道翠云路201号`,
				tel: "电话：15330368888； 023-77859888",
				img: [
					cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/kaoquanyang/chenjiahuayuan/1.png",
					cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/kaoquanyang/chenjiahuayuan/2.jpg",
					cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/kaoquanyang/chenjiahuayuan/3.jpg",
					cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/kaoquanyang/chenjiahuayuan/4.jpg",
					cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/kaoquanyang/chenjiahuayuan/5.jpg"
				]
			},
			{
				name: "半山渡酒店",
				desc: ``,
				addr: `地址：武隆区仙女山镇逸云路8号`,
				tel: "电话：15730725620",
				img: [cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/kaoquanyang/2.png"]
			}
		]
	},
	{
		name: "生态火锅",
		shops: [
			{
				name: "余家庄生态鱼农家",
				desc: `地址：武隆区银杏大道30号`,
				addr: `地址：武隆区银杏大道30号`,
				tel: "电话：15803648855",
				img: [cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/shengtaihuoguo/1.png"]
			},
			{
				name: "清雅斋鲜菌养生汤锅",
				desc: `地址：武隆区柏杨路宏福饭店三楼`,
				tel: "电话：023-77714567",
				img: [cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/shengtaihuoguo/2.png"]
			}
		]
	},
	{
		name: "山珍土鸡汤",
		shops: [
			{
				name: "新田野·羊鱼鲜体验馆·山珍土鸡汤",
				addr: "地址：武隆区银杏大道149号",
				desc: `“代老幺羊鱼鲜”创立于1984年，近四十年时间一直秉承品质至上，顾客至上的原则，深受消费者的喜爱和欢迎，以后也会继续秉承这个原则，为广大消费者服务！`,
				tel: "电话：77737588、订餐电话：15095827216",
				img: [
					cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/shangzhentijitang/1.jpeg",
					cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/shangzhentijitang/2.png",
					cosPrefix + "three-level/xiangsu/meishijingxuan/meishidianpu/shangzhentijitang/3.png"
				]
			}
		]
	}
];
</script>
<style lang="scss" scoped>
.page {
	padding: 0 320px;
	padding-bottom: 80px;
}
.title {
	margin: 40px 0;
	font-size: 24px;
	font-weight: bold;
	color: #333333;
}
.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	.list {
		display: flex;
		.box {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 305px;
			margin-right: 20px;
			font-size: 16px;
			color: #101010;
			&:last-child {
				margin-right: 0;
			}
			.el-image {
				width: 100%;
				height: 165px;
				margin-bottom: 10px;
			}
		}
	}
}
.food-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	.tabs {
		display: flex;
		.tab {
			padding: 0 20px;
			font-size: 20px;
			cursor: pointer;
			border-right: 1px solid #dedede;
			&:hover,
			&.active {
				color: #8a1313;
			}
			&:last-child {
				border: none;
			}
		}
	}
}
.shop-list {
	width: 100%;
	.shop {
		display: flex;
		width: 100%;
		margin-top: 40px;
		.info {
			display: flex;
			flex: 1;
			flex-direction: column;
			height: 320px;
			padding-left: 40px;
			overflow: hidden;
			.name {
				font-size: 24px;
				font-weight: bold;
				color: rgb(25 25 25 / 100%);
			}
			.content {
				min-height: 100px;
				margin: 40px 0;
				font-size: 16px;
				color: rgb(102 102 102 / 100%);
			}
			.btn {
				width: 116px;
			}
		}
	}
}

@media all and (max-width: 750px) {
	.page {
		padding: 16px;
	}
	.title {
		margin: 16px 0;
	}
	.header {
		.list {
			flex-wrap: wrap;
			.box {
				width: 47.5%;
				margin-right: 5%;
				margin-bottom: 16px;
				&:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
	}
	.food-list {
		.tabs {
			.tab {
				padding: 10px;
				font-size: 14px;
			}
		}
	}
	.shop-list {
		.shop {
			flex-direction: column;
			width: 100%;
			.info {
				.content {
					margin: 10px 0;
				}
			}
		}
	}
}
</style>
